import { ref, onMounted, onUnmounted } from 'vue'

export default function useInnerWidth () {
  const innerWidth = ref(window.innerWidth)
  const update = (e: Event) => {
    innerWidth.value = (e.target as Window).innerWidth
  }
  onMounted(() => {
    window.addEventListener('resize', update)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', update)
  })

  return innerWidth
}
